import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, pageSize, partOf } from "../../utils/common";
import courseStyleSheet from "./course_styles";
import none_people from "../../assets/img/noce_record.png";
var _styleSheet = courseStyleSheet;
let Detail = class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageIndex: 1,
      pageSize,
      items: [],
      totalCount: 0
    };
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '我的课程' });
    this.getMyCourseInfo();
  }
  getMyCourseInfo() {
    let { userStore } = this.props.stores;
    let { pageIndex, pageSize } = this.state;
    userStore.getMyCourseInfo({
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({ totalCount: toJS(res.totalCount), items: toJS(res.items) });
        } else {
          const { items } = this.state;
          items.push(...(res.items || []));
          this.setState({ totalCount: res.totalCount, items });
        }
      }
    });
  }
  onReachBottom() {
    let { totalCount, pageSize, pageIndex } = this.state;
    const { loading } = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getMyCourseInfo();
      });
    }
  }
  render() {
    let { items } = this.state;
    return <View>
       {items.length > 0 && items.map(item => {
        return <View onClick={this.handelRouter.bind(this, '/pages/user/course_detail?id=' + item.id)} style={_styleSheet["list-08-item"]}>
              <Image src={item.courseLogoImg} style={_styleSheet["item-img"]} />
              <View style={_styleSheet["info"]}>
                <View style={_styleSheet["title"]}>
                  {partOf(item.courseName, 50)}
                </View>
                <View style={_styleSheet["old-price"]} />
                <View style={_styleSheet["price-wrap"]}>
                  <View style={[_styleSheet["price"], _styleSheet["buy-course"]]}>已购买课程
                    <Text style={[_styleSheet["big"], _styleSheet["color-orange"]]}> {item.buyCount} </Text>
                    节
                  </View>
                  <View style={_styleSheet["num"]}>全部课程共 {item.courseCount} 节</View>
                </View>
              </View>
            </View>;
      })}
       {items.length <= 0 && <View style={_styleSheet["none-info"]}>
          <Image src={none_people} style={_styleSheet["none-icon"]} />
          <Text style={[_styleSheet["none-title"], _styleSheet["list-desc"]]}>暂时还没有课程信息~</Text>
       </View>}
     </View>;
  }
};
Detail = tslib_1.__decorate([inject("stores"), observer], Detail);
export default Detail;